<template>
    <el-container>
        <el-aside width="200px">
            <el-menu default-active="2" text-color="#fff" background-color="#000" class="el-menu-vertical-demo"
                :collapse="menuCollapse" router @open="handleOpen" @close="handleClose">
                <side-menu v-if="menus.length" :menus="menus" />
            </el-menu>
        </el-aside>
        <el-container>
            <el-header>
                <header-view />
            </el-header>
            <el-main>
                <div class="router-card">
                    <router-view />
                </div>
            </el-main>
        </el-container>
    </el-container>
</template>
<script setup lang="ts">
import { computed, onMounted } from 'vue';
import SideMenu from './SideMenu.vue';
import HeaderView from './HeaderView.vue';
import { LocalService } from '~/service/common'
import useApp from '@admin/_find/store/app';
import proxy from '../../../proxy'

const appStore = useApp()

const localService = new LocalService()

const handleOpen = () => { }
const handleClose = () => { }

const menus = computed(() => appStore.routers)

const menuCollapse = computed(() => appStore.menuCollapse)

onMounted(() => {
    localService.saveApiConfig({
        url: proxy['/api'].target,
        tokenKey: 'Authorization'
    })
})
</script>
<style lang="scss" scoped>
.router-card {
    background-color: #f1f4f7;
    padding: 20px;
    height: calc(100vh - 60px);
    overflow-y: auto;
}
</style>